var box = document.querySelector('#box')
var ul = document.querySelector('#box>ul')
var left = document.querySelector('.left')
var right = document.querySelector('.right')
var round = document.querySelector('.round')

// 1. 鼠标移入移出展示左右箭头 
box.onmouseenter = function() {
  left.style.display = 'block'
  right.style.display = 'block'

  clearInterval(timer) 
  timer = null
}
box.onmouseleave = function() {
  left.style.display = 'none'
  right.style.display = 'none'

  timer = setInterval(function() {
    right.click()
  }, 2000)
}

// 2. 动态生成 小圆点 
for(var i = 0; i < ul.children.length; i++) {
  var span = document.createElement('span')

  span.setAttribute('data-index', i)

  round.appendChild(span)
}
round.children[0].className = 'active'

// 3. 给小圆点注册事件 拍他高亮  
var spans = document.querySelectorAll('span')
for(var i = 0; i < spans.length;  i++) {
  spans[i].onclick = function() {
    document.querySelector('.active').className = ''
    this.className = 'active'  // this  是谁调用就是谁 span

    // 4. 点击小圆点 移动ul
    var index = this.getAttribute('data-index')
    num = index - 0
    circle = index - 0
    animate(ul, - index * 450)

  }
}

// 6. 动态生成图片 
var li = ul.children[0].cloneNode(true)
ul.appendChild(li)

// 5. 右侧按钮点击事件 
var num = 0
var circle = 0
var flag = true

right.onclick = function() {
  if(flag) {
    flag = false

    if(num === 3) {
      ul.style.left = 0
      num = 0
    }
    num += 1
    animate(ul, - num * 450, function() {
      flag = true
    })
  
    circle += 1
    if(circle === 3) {
      circle = 0
    }
    // 将高亮的人选中                   将类名移除
    document.querySelector('.active').className = ''
  
    round.children[circle].className = 'active'
  }

}

left.onclick = function() {
  if(num === 0) {
    ul.style.left = - 3 * 450 + 'px'
    num = 3
  }
  num -= 1
  animate(ul, - num * 450)

  circle -= 1
  if(circle < 0) {
    circle = 2
  }
  // 将高亮的人选中                   将类名移除
  document.querySelector('.active').className = ''

  round.children[circle].className = 'active'
}

var timer = setInterval(function() {
  right.click()
}, 2000)

// 1. 提升技术
// 2. 理财
// 3. 身体
